import { useEffect, useRef, useState } from 'react';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import {
  PageContainer,
  ProTable,
  ModalForm,
  ProFormText,
  ProForm,
} from '@ant-design/pro-components';
import { Button, message, Popconfirm, Space } from 'antd';
import {
  getillness_categories,
  delillness_categories,
  delmanyillness_categories,
  updateillness_categories,
  createillness_categories,
} from '@/services/Jibingsort';
import MyUpload from '@/components/MyUpload';
import { dalImg } from '@/utils/tools';
function Articles() {
  const actionRef = useRef<ActionType>();
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [currentId, setCurrentId] = useState(''); // 当前id，默认是空表示新增
  const [imageUrl, setImageUrl] = useState<any>(''); // 文件上传的图片信息
  const [selectedData, setSelectedData] = useState([]); // 选中的内容

  const [myForm] = ProForm.useForm();

  useEffect(() => {
    // 关闭模态框的时候清空数据
    if (!createModalVisible) {
      setCurrentId('');
      setImageUrl('');
    }
  }, [createModalVisible]);
  return (
    <>
      <PageContainer>
        <ProTable
          rowKey="id"
          // https://procomponents.ant.design/components/table/#request
          // 可以直接设置request属性，为一个function
          //  它的返回值中的数据可以直接绑定显示
          //  如果我们改变了查询条件，会自动得传递过去，进行调接口
          request={getillness_categories}
          actionRef={actionRef}
          // rowSelection加上它之后就可以实现多行删除
          rowSelection={{
            // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
            // 注释该行则默认不显示下拉选项
            // selections: [],
            // defaultSelectedRowKeys: [1],
            // 选择改变之后执行
            onChange(selRows: any) {
              setSelectedData(selRows);
            },
            // 当前选中的内容
            selectedRowKeys: selectedData,
          }}
          // 自定义选择之后的操作提示
          tableAlertOptionRender={({ selectedRowKeys }: any) => {
            return (
              <Space size={16}>
                <Popconfirm
                  title="是否确认删除选中的内容?"
                  onConfirm={async () => {
                    // 批量删除
                    if (selectedRowKeys.length > 0)
                      await delmanyillness_categories(selectedRowKeys.join(','));
                    actionRef.current?.reload();
                    setSelectedData([]); // 设置选中的行id为空
                  }}
                >
                  <a>批量删除</a>
                </Popconfirm>

                {/* <a>导出数据</a> */}
              </Space>
            );
          }}
          columns={[
            {
              title: '序号',
              hideInSearch: true, // 表示不在查询中显示
              width: 70,
              align: 'center',
              render(v, r, i) {
                return i + 1;
              },
            },
            {
              title: '名字',
              align: 'center',
              dataIndex: 'name', // 这个在查询的时候会自动的作为属性名
            },
            {
              title: '描述',
              align: 'center',
              hideInSearch: true,
              dataIndex: 'desc',
            },

            {
              title: '头像',
              align: 'center',
              // dataIndex: 'desc',
              hideInSearch: true,
              render(v: any) {
                return <img className="t-img" src={dalImg(v.image)} />;
              },
            },

            {
              title: '操作',
              align: 'center',
              hideInSearch: true,
              width: 100,
              render(v: any) {
                return (
                  <Space>
                    <Button
                      type="primary"
                      size="small"
                      icon={<EditOutlined />}
                      onClick={() => {
                        setCurrentId(v.id); // 设置当前id
                        handleModalVisible(true); // 弹出modal
                        setImageUrl(v.image); // 设置图片
                        myForm.setFieldsValue(v); // 设置表单的默认值
                      }}
                    />
                    <Popconfirm
                      title="是否确认删除?"
                      onConfirm={async () => {
                        await delillness_categories(v.id);
                        actionRef.current?.reload(); // 重新加载数据
                      }}
                    >
                      <Button type="primary" size="small" icon={<DeleteOutlined />} danger />
                    </Popconfirm>
                  </Space>
                );
              },
            },
          ]}
          toolBarRender={() => {
            return [
              <Button
                key="1"
                type="primary"
                icon={<PlusOutlined />}
                size="small"
                onClick={() => {
                  handleModalVisible(true);
                }}
              />,
            ];
          }}
        />
      </PageContainer>
      <ModalForm
        width={1000}
        title="编辑"
        form={myForm}
        // modalProps 表示设置模态框得数据
        modalProps={{ destroyOnClose: true }}
        preserve={false}
        visible={createModalVisible}
        onFinish={async (v) => {
          console.log(v);
          if (currentId) {
            await updateillness_categories(currentId, { ...v, image: imageUrl }); // 修改
          } else {
            await createillness_categories({ ...v, image: imageUrl }); // 新增
          }

          message.success('保存成功');
          handleModalVisible(false);
          actionRef.current?.reload(); // 重新加载数据
        }}
        // onVisibleChange可见性改变的时候执行
        onVisibleChange={handleModalVisible}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '名字不能为空',
            },
          ]}
          placeholder="请输入内容"
          name="name"
          label="名字"
        />
        <ProFormText placeholder="请输入内容" name="desc" label="描述" />

        <ProForm.Item label="头像" name="image">
          <MyUpload imageUrl={imageUrl} setImageUrl={setImageUrl} />
        </ProForm.Item>
      </ModalForm>
    </>
  );
}

export default Articles;
